<template>
    <div>
        <h2 style="text-align:center">用户理财明细</h2>
        <table class="table table-bordered">
            <thead>
                <tr style="background-color: aqua;">
                    <td>用户借款编号</td>
                    <td>借款用户账号</td>
                    <td>借款款项名称</td>
                    <td>借款金额</td>
                    <td>剩余还款本金</td>
                </tr>
            </thead>
    
            <tbody>
                <tr v-for="item in Info">
                    <td>{{ item.UB_Id }}</td>
                    <td>{{ item.UL_Name }}</td>
                    <td>{{ item.B_Name }}</td>
                    <td>{{ item.UB_Money }}</td>
                    <td>0</td>
                </tr>
            </tbody>
        </table>
    </div>
    </template>
    
    <script setup lang="ts">
    import { useRoute } from 'vue-router';
    import axios from 'axios';
    import {ref,onMounted} from 'vue';
    
    //创建路由数据对象实例
    const route=useRoute();
    
    //创建响应式数据
    const Info=ref([{
        UB_Id:0,
        UL_Name:"",
        B_Name:"",
        UB_Money:0,
    }])
    
    //创建生命周期函数钩子
    onMounted(()=>{
        LoadData()
    })
    
    const LoadData=()=>{
        axios.get("https://localhost:44321/api/Borrows/GetUserBorrowMoney",
            {
                params:{
                    Bid:route.params.Bid
                }
            }
        )
        .then(res=>{
            console.log(res.data)
            Info.value=res.data
        })
    }
    </script>